<template>
    <div class="login">
      <div class="login-main">
        <div class="login-left">
          <h1 class="title">vue3demo</h1>
          <p class="sub-title">后台管理平台</p>
          <div class="underline"></div>
          <div class="login-text">
            <p>用户登录</p><span>请输入账号密码登录</span>
          </div>
          <div class="login-input">
            <el-input
              placeholder="请输入账号"
              v-model="username"
              :prefix-icon="UserFilled"
              class="username">
            </el-input>
            <el-input
              placeholder="请输入密码"
              v-model="password"
              class="password"
              show-password
              :prefix-icon="Lock"
              @keyup.enter="login">
            </el-input>
          </div>
          <div class="login-btn">
            <el-button class="btn" @click="login">立即登录</el-button>
          </div>
        </div>
      </div>
      <Particles id="tsparticles"  :options="{
                    fpsLimit: 60,
                    interactivity: {
                        events: {
                            onClick: {
                                enable: true,
                                mode: 'push'
                            },
                            onHover: {
                                enable: true,
                                mode: 'repulse'
                            },
                            resize: true
                        },
                        modes: {
                            bubble: {
                                distance: 400,
                                duration: 2,
                                opacity: 0.8,
                                size: 40
                            },
                            push: {
                                quantity: 4
                            },
                            repulse: {
                                distance: 200,
                                duration: 0.4
                            }
                        }
                    },
                    particles: {
                        color: {
                            value: '#ffffff'
                        },
                        links: {
                            color: '#ffffff',
                            distance: 150,
                            enable: true,
                            opacity: 0.5,
                            width: 1
                        },
                        collisions: {
                            enable: true
                        },
                        move: {
                            direction: 'none',
                            enable: true,
                            outMode: 'bounce',
                            random: false,
                            speed: 5,
                            straight: false
                        },
                        number: {
                            density: {
                                enable: true,
                                area: 700
                            },
                            value: 80
                        },
                        opacity: {
                            value: 0.5
                        },
                        shape: {
                            type: 'circle'
                        },
                        size: {
                            random: true,
                            value: 5
                        }
                    },
                    detectRetina: true
                }">
      </Particles>
    </div>
</template>
<script setup>
import { UserFilled, Lock } from '@element-plus/icons-vue';
import { ElMessage } from 'element-plus';
import { ref }  from 'vue';
import { useRouter } from "vue-router";
  const router = useRouter()
  const username = ref('test')
  const password = ref('test666')
  const login =() => {
    if (!username.value || !password.value) {
      ElMessage.error('请输入账号密码')
      return
    }
    router.push({
      path: '/home'
    })
  }
</script>

<style lang="scss" scoped>
  .login {
    width: 100%;
    height: 100%;
    background: url('@/assets/bg.jpg') no-repeat;
    background-size: 100% 100%;
    position: relative;
    overflow: hidden;
    .login-main {
      width: 500px;
      height: 428px;
      background-color:#fff;
      position: absolute;
      left: 50%;
      top: 40%;
      margin: -214px 0 0 -250px;
      border-radius: 16px; 
      display: flex;
      z-index: 999;
      .login-left {
        flex: 1;
        .title {
          margin: 48px 0 9px 0;
          font-size: 32px;
          color: #0bafa4;
          margin-left: 64px;
          font-family: 'Microsoft YaHei';
        }
        .sub-title {
          margin-left: 68px;
          margin-bottom: 18px;
          color: #001529;
          font-size: 14px;
          font-weight: 400;
          font-family: 'Microsoft YaHei';
        }
        .underline {
          margin-left: 64px;
          margin-bottom: 29px;
          width: 377px;
          height: 1px;
          background-color: #E2E5EE;
        }
        .login-text {
          margin-left: 64px;
          margin-bottom: 19px;
          display: flex;
          align-items: center;
          p {
            font-size: 16px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: #E60012;
            margin-right: 5px;
          }
          span {
            display: inline-block;
            color: #B5BFC9;
            font-size: 14px;
          }
        }
        .login-input {
          margin: 0 60px;
          .username, .password {
            :deep(.el-input__inner) {
              font-size: 16px;
              padding-left: 40px;
              height: 41px;
              line-height: 41px;
            }
          }
          .username {
            margin-bottom: 20px;
          }
          .login-icon {
            font-size: 20px;
          }
          .forget-password {
            position: relative;
            top: 20px;
            cursor: pointer;
            text-align: right;
            font-size: 14px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: #001529;
          }
        }
      }
    }
    .login-btn {
      margin-top: 20px;
      display: flex;
      justify-content: center;
      .btn {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        margin: 0 60px;
        height: 48px;
        background: #0bafa4;
        border-radius: 4px;
        font-size: 16px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #FFFFFF;
      }
    }
  }
</style>